Чат

Чат стал одной из самых глубоких переработок. До переделки он представлял собой смесь разных мессенджеров, где каждая часть жила по своим правилам. Я занял чёткую позицию и определил единый принцип отображения: сообщения из Telegram, WhatsApp, VK и других источников должны читаться одинаково и отличаться только аккуратными метками.

Работа над этим модулем требовала постоянных решений на границе логики и интерфейса. Чат связан практически со всем: деревьями отделов, задачами, карточками, таблицами и фильтрами. Когда мы обсуждали реакции, статусы, теги или формат ID, я осознанно выбирал путь, при котором внешне интерфейс остаётся простым, а сложность уходит внутрь системы.

Этот подход был принят командой и стал основой модуля. Через итерации чат превратился в устойчивый инструмент: единая лента с уникальными ID, расширенная фильтрация, подсветка ключевых слов, реакции, теги, кастомное контекстное меню и аккуратная связь с деревьями. Всё живёт по правилам дизайн-системы и масштабируется без боли.

Для ключевых сценариев чата я прорабатывал анимации в After Effects.
Они помогали проверить поведение интерфейса, тайминги и ритм взаимодействий, а также служили референсом для разработки.

Календарь

Календарь был самым перегруженным модулем. В нём должны были жить задачи, события, повторения, дедлайны, заметки и зависимости. Я полностью определил, как он будет выглядеть и вести себя: переработал сетку, карточку сущности, легенду, режимы просмотра и базовую логику взаимодействия.

Основная сложность была не в визуале, а в стыковке режимов. Дневной, недельный, месячный и годовой виды не должны были конфликтовать друг с другом. Продакт настаивал на широкой функциональности, разработка ставила архитектурные границы, пользователи ожидали простоты. В этот момент я зафиксировал позицию: календарь должен оставаться читаемым при любом уровне сложности, а расширение функциональности не должно ломать восприятие.

Именно это решение стало определяющим. Задачу можно создать за секунды, карточка раскрывается до полной формы с дополнительными статусами, повторениями и тегами. Легенда цветов снижает визуальную нагрузку, drag’n’drop работает во всех режимах. Календарь выдерживает многослойную логику и при этом остаётся ясным — без ощущения перегруженности.

Таймлайн

Таймлайн родился как продолжение календаря. Он показывает то, чего календарю не видно: зависимости между задачами — кто блокирует кого, что идёт параллельно, где провисает процесс.

Работать над таймлайном было непросто. Продакт видел в нём гибкую диаграмму, разработка ставила технические ограничения, а пользователям нужно было объяснение, а не профессиональный Гант. Мы долго искали баланс между сложностью и чистотой.

В итоге у таймлайна появилась гибкая шкала, задачи разной длительности, развиваемая сетка, аккуратные связи и возможность таскать и менять длительность записей. Он читается без тяжести и оставляет ощущение, что график действительно можно понять.

Таблицы

Таблицы казались простыми ровно до того момента, пока мы не начали погружаться в реальные данные. Они стали одним из центральных инструментов: анализ результатов опросов, фильтрация, сравнение статистики, работа с большими наборами значений.

Я собрал четыре режима отображения: без линий, с линиями, «зебра», «зебра» с линиями, а также три плотности строк. Это было нужно, чтобы таблицы одинаково хорошо работали и в лёгких сценариях, и в тяжёлых.

Сложность пришла на поведение: рендер столбцов, поиск, фильтры, групповые операции, создание пользовательских «операций» (например, массовая замена значений), экспорт. Отдельная глава — цветовая маркировка ячеек и колонок, которую требовал продукт-оунер. Мы долго спорили, как реализовать её так, чтобы не разрушить читаемость, и в итоге нашли вариант, который даёт нужный эффект без перегрузки.

Теперь таблицы выглядят чисто и выдерживают нагрузку, ради которой создавались.

Канбан

Канбан должен был быть понятным с первой секунды. Минимум усилий — максимум ясности. Я собрал его вокруг логичной структуры: статусы, колонки, карточки. При этом внутри карточек живёт большое количество информации, и её нужно было показать аккуратно, без потери смысла.

Отдельным моментом стали несколько досок на одном экране. Продукт-оунер хотел, чтобы пользователь мог легко переключаться между разными процессами. Мы сделали сворачивание и разворачивание досок, что позволило работать параллельно, не теряя контекст.

Группировки задач тоже обсуждались долго. Вариантов было много, но в итоге мы выбрали путь, который сохраняет визуальный порядок и при этом даёт контроль.

Интерактивная доска

Интерактивная доска — противоположность строгим модулям. Это место для идей, схем, связей, текстов, стикеров и маленьких заметок. Что-то между Miro и внутренним рабочим пространством.

Сложность здесь была другого типа: не дать элементам расползтись в разные стили. Я удерживал минимализм, чтобы даже большое количество заметок не превращалось в визуальный шум. Карточки, связи и текстовые блоки работали на общем языке системы.

Связи мы выстраивали так, чтобы их мог понять даже ребёнок: мягкие линии, лёгкие маркеры, никаких визуальных скачков.

Дерево сущностей

Дерево — тихое сердце всей системы. Оно связывает чат, задачи, таблицы, статусы, теги и структуру отделов. Без него продукт развалился бы за секунду.

Я переорганизовал дерево так, чтобы оно выглядело простым снаружи и оставалось сильным внутри. Каждая вложенность должна читаться мгновенно. Любой отступ значим. Любое движение узла — предсказуемо.

Самое важное заключалось в том, что дерево используется повсюду. Один неверный визуальный код ломал бы весь продукт. Поэтому мы сделали его максимально лаконичным и системным.

Оргструктуры

Модуль появился из прямого требования продукта: нужно было видеть людей, роли, подчинённость и вклад в одном пространстве, а также заложить основу для системы скоринга и оценки. Простого дерева для этого было недостаточно.

Я отказался от жёсткой офисной диаграммы и собрал свободное полотно. Структура читается за счёт ритма, отступов и акцентов, масштабируется от десятков узлов до тысяч и при этом остаётся понятной.

Цвет работает как навигация по ролям и когортам и настраивается под разные сценарии. Интеракции встроены в логику: связи, перестройка уровней и просмотр зависимостей происходят без обучения.

В итоге модуль стал рабочим каркасом для оргструктур и сильно упростил ориентацию в сложных иерархиях.

Визуальная основа

Я сформировал три ключевых набора: цвета, типографика и иконки.

В шрифтах мы остановились на Inter Tight: он достаточно строгий и технологичный. В ходе обсуждения я скорректировал трекинг и пропорции, чтобы добиться большей воздушности без потери точности.

Цветовые палитры разработаны в двух режимах: светлом и тёмном. Переключение между ними происходит моментально через плагин, и весь интерфейс остаётся консистентным.

Палитра используется во всех ключевых сценариях: чатах, таблицах, календаре и канбане.

Иконки я взял за основу из Material Design, но многие пришлось перерисовать вручную, чтобы привести их к единому стилю, сетке и оптическому весу.

Дизайн-система

Когда я пришёл в продукт, интерфейсы не были связаны между собой: разные шрифты, разные цвета, элементы вели себя по-разному. Любое изменение тянуло за собой цепочку ошибок. Чтобы двигаться дальше, нужно было начать с основания. Я построил roadmap дизайн-системы и с нуля проработал базу для всех сценариев.

В процессе не раз возникали предложения расширить систему за счёт декоративных приёмов или визуальных исключений. Я сознательно отказывался от этого. При текущей плотности данных и количестве сценариев такие решения разрушили бы целостность и читаемость. Вместо этого мы закладывали расширение через состояния и контекст, а не через новые формы.

Через базовые элементы я выстроил принцип поведения, одинаковый во всех разделах.
Кнопки, чекбоксы, радиокнопки, селекты, инпуты, переключатели, слайдеры, прогресс-бары и пагинация — всё выровнено по размерам, отступам и состояниям.

Здесь соединяются небольшие механики.
Dropdown, Tabs, Filters, Toolbar, Lists, Headers, date picker — всё построено на одних и тех же паттернах, чтобы сохранить общий характер системы.

Это компоненты, которые уже несут полноценную функциональность: карточки, левое меню, дерево сущностей, таблицы, чат, календарь, таймлайн, канбан и интерактивная доска.
Они объединяют атомы и молекулы в самостоятельные системы.

После появления дизайн-системы команда перестала обсуждать базовые решения на каждом новом экране. Фокус сместился с «как это выглядит» на «зачем это нужно». Это сократило количество правок на поздних этапах и упростило коммуникацию между дизайном и разработкой.

Новые модули перестали ломать соседние части продукта. Даже при сложной логике они встраивались в существующую систему без пересборки интерфейса и потери целостности.

Выводы

Этот проект стал для меня точкой перехода от проектирования отдельных экранов к работе с продуктом как с системой. Я быстро понял, что здесь любое локальное решение неизбежно влияет на общую структуру, поведение интерфейса и возможности его развития в будущем.

Мой процесс строился от общего к частному: сначала я формулировал ключевые сущности, связи между ними и основные сценарии, и только после этого переходил к отрисовке путей пользователя. В ходе работы основной сложностью был поиск баланса между требованиями бизнеса, техническими ограничениями разработки и необходимостью сохранять логическую целостность продукта.

Ключевым принципом стало мышление на перспективу. Я сознательно закладывал в дизайн устойчивость и масштабируемость, выбирая долгосрочную стабильность системы вместо быстрых визуальных решений, которые могли бы завести в тупик через пару месяцев.

В результате проект перестал быть набором разрозненных макетов и превратился в систему с единой логикой и понятными правилами роста. Я перестал мыслить просто «интерфейсами» и начал думать структурой и поведением. Именно такой системный подход я считаю обязательным при работе над любым сложным продуктом.